<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公司职员管理系统</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon"/>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        :root {
            --primary-color: #3a7bd5;
            --secondary-color: #00d2ff;
            --sidebar-bg: #2c3e50;
            --sidebar-hover: #34495e;
            --content-bg: #f8f9fa;
            --card-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }

        body {
            margin-left: 250px; /* 等于侧边栏宽度 */
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f0f2f5;
            color: #333;
            overflow-x: hidden;
        }

        .app-container {
            display: flex;
            min-height: 100vh;
        }

        /* 侧边栏样式 */
        .sidebar {
            position: fixed; /* 固定定位 */
            top: 0;          /* 顶部对齐 */
            left: 0;         /* 左侧对齐 */
            height: 100vh;   /* 全屏高度 */
            overflow-y: auto; /* 允许侧边栏内容滚动 */
            width: 250px;
            background: var(--sidebar-bg);
            color: white;
            transition: all 0.3s;
            box-shadow: 3px 0 10px rgba(0,0,0,0.1);
            z-index: 1000;
        }

        .sidebar-header {
            padding: 20px;
            background: rgba(0,0,0,0.2);
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }

        .sidebar-menu {
            padding: 15px 0;
        }

        .sidebar-menu li {
            margin-bottom: 5px;
        }

        .sidebar-menu a {
            color: #ecf0f1;
            padding: 12px 20px;
            display: block;
            text-decoration: none;
            transition: all 0.2s;
            border-radius: 4px;
            margin: 0 10px;
        }

        .sidebar-menu a:hover, .sidebar-menu a.active {
            background: var(--sidebar-hover);
            color: white;
        }

        .sidebar-menu a i {
            margin-right: 10px;
            width: 20px;
            text-align: center;
        }

        /* 主内容区样式 */
        .main-content {
            flex: 1;
            padding: 20px;
            transition: all 0.3s;
        }

        .header {
            background: white;
            padding: 15px 25px;
            margin-bottom: 25px;
            border-radius: 10px;
            box-shadow: var(--card-shadow);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .welcome-text h1 {
            font-size: 1.8rem;
            margin: 0;
            color: var(--primary-color);
        }

        .welcome-text p {
            margin: 5px 0 0;
            color: #666;
        }

        .user-profile {
            display: flex;
            align-items: center;
        }

        .user-info {
            text-align: right;
            margin-right: 15px;
        }

        .user-info .name {
            font-weight: 600;
            font-size: 1.1rem;
        }

        .user-info .role {
            font-size: 0.9rem;
            color: #777;
        }

        .avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 1.2rem;
        }

        /* 模块卡片样式 */
        .module-card {
            background: white;
            border-radius: 10px;
            box-shadow: var(--card-shadow);
            margin-bottom: 25px;
            overflow: hidden;
            transition: transform 0.3s;
        }

        .module-card:hover {
            transform: translateY(-5px);
        }

        .card-header {
            background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .card-header h3 {
            margin: 0;
            font-size: 1.3rem;
        }

        .card-body {
            padding: 20px;
        }

        /* 个人中心样式 */
        .personal-info {
            display: flex;
            margin-bottom: 20px;
        }

        .personal-details {
            flex: 1;
        }

        .detail-item {
            margin-bottom: 12px;
            display: flex;
        }

        .detail-label {
            width: 120px;
            font-weight: 600;
            color: #555;
        }

        /* 统计卡片 */
        .stats-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 25px;
        }

        .stat-card {
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: var(--card-shadow);
            display: flex;
            align-items: center;
        }

        .stat-icon {
            width: 60px;
            height: 60px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            font-size: 1.8rem;
        }

        .stat-content {
            flex: 1;
        }

        .stat-value {
            font-size: 1.8rem;
            font-weight: 700;
            margin: 0;
            line-height: 1.2;
        }

        .stat-label {
            color: #777;
            margin: 5px 0 0;
        }

        /* 图表容器 */
        .chart-container {
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: var(--card-shadow);
            margin-bottom: 25px;
            height: 350px;
        }

        /* 业务表格 */
        .business-table {
            width: 100%;
            border-collapse: collapse;
        }

        .business-table th {
            background-color: #f8f9fa;
            padding: 12px 15px;
            text-align: left;
            font-weight: 600;
            color: #495057;
            border-bottom: 2px solid #e9ecef;
        }

        .business-table td {
            padding: 12px 15px;
            border-bottom: 1px solid #e9ecef;
            color: #495057;
        }

        .business-table tr:hover {
            background-color: #f8f9fa;
        }

        .status-badge {
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 500;
        }

        .status-active {
            background-color: #d4edda;
            color: #155724;
        }

        .status-pending {
            background-color: #fff3cd;
            color: #856404;
        }

        .status-completed {
            background-color: #d1ecf1;
            color: #0c5460;
        }

        /* 响应式设计 */
        @media (max-width: 992px) {
            .app-container {
                flex-direction: column;
            }

            .sidebar {
                width: 100%;
                height: auto;
            }

            .main-content {
                margin-left: 0;
            }
        }

        @media (max-width: 768px) {
            .header {
                flex-direction: column;
                text-align: center;
            }

            .user-profile {
                margin-top: 15px;
                justify-content: center;
                width: 100%;
            }

            .user-info {
                text-align: center;
                margin-right: 0;
                margin-bottom: 10px;
            }

            .personal-info {
                flex-direction: column;
            }

            .stats-container {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="app-container">
        <!-- 侧边导航 -->
        <div class="sidebar">
            <div class="sidebar-header">
                <h2><i class="fas fa-list"></i> 功能导航</h2>
            </div>
            <ul class="sidebar-menu">
                <li><a href="#personal-center" class="active"><i class="fas fa-user-circle"></i> 个人中心</a></li>
                <li><a href="#statistics-report"><i class="fas fa-chart-bar"></i> 统计报表</a></li>
                <li><a href="#business-management"><i class="fas fa-briefcase"></i> 业务管理</a></li>
                <li><a href="#department-management"><i class="fas fa-users"></i> 部门管理</a></li>

                <li><a href="#help-center"><i class="fas fa-question-circle"></i> 帮助中心</a></li>
            </ul>
        </div>
        <!-- 主内容区 -->
        <div class="main-content">
            <!-- 顶部标题栏 -->
            <div class="header">
                <div class="welcome-text">
                    <h1>公司职员管理系统</h1>
                    <p>欢迎使用企业人力资源管理平台</p>
                </div>
                <div class="user-profile">
                    <div class="user-info">
                        <div class="name" th:text="${loginUser.username}"></div>
                        <div class="role" th:text="${loginUser.role.getName()}"></div>
                    </div>
                    <div class="avatar">张</div>
                </div>
            </div>

            <!-- 统计卡片 -->
            <div class="stats-container">
                <div class="stat-card">
                    <div class="stat-icon" style="background: linear-gradient(135deg, #3a7bd5, #00d2ff);">
                        <i class="fas fa-users"></i>
                    </div>
                    <div class="stat-content">
                        <h3 class="stat-value">1,248</h3>
                        <p class="stat-label">员工总数</p>
                    </div>
                </div>

                <div class="stat-card">
                    <div class="stat-icon" style="background: linear-gradient(135deg, #00b09b, #96c93d);">
                        <i class="fas fa-briefcase"></i>
                    </div>
                    <div class="stat-content">
                        <h3 class="stat-value">86</h3>
                        <p class="stat-label">进行中业务</p>
                    </div>
                </div>

                <div class="stat-card">
                    <div class="stat-icon" style="background: linear-gradient(135deg, #ff5858, #f09819);">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <div class="stat-content">
                        <h3 class="stat-value">24.7%</h3>
                        <p class="stat-label">本月增长率</p>
                    </div>
                </div>

                <div class="stat-card">
                    <div class="stat-icon" style="background: linear-gradient(135deg, #8e2de2, #4a00e0);">
                        <i class="fas fa-tasks"></i>
                    </div>
                    <div class="stat-content">
                        <h3 class="stat-value">92%</h3>
                        <p class="stat-label">任务完成率</p>
                    </div>
                </div>
            </div>

            <!-- 个人中心模块 -->
            <div class="module-card" id="personal-center">
                <div class="card-header">
                    <h3><i class="fas fa-user-circle me-2"></i> 个人中心</h3>
                    <div class="d-flex gap-2">
        <button class="btn btn-sm btn-light" onclick="window.location.href='/company/personalCenter'">编辑信息</button>
        <button class="btn btn-sm btn-light" onclick="window.location.href='/company/tokenChange'">修改密码</button>
    </div>
                </div>
                <div class="card-body">
                    <div class="personal-info">
                        <div class="personal-details">
                            <div class="detail-item">



                                <div class="detail-label">员工ID：</div>
                                <div th:text="${loginUser.employee.getId()}"></div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">姓名：</div>
                                <div th:text="${loginUser.getUsername()}"></div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">性别：</div>
                                <div th:text="${loginUser.employee.getGender()}"></div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">出生日期：</div>
                                <div th:text="${loginUser.employee.getBirthDate()}"></div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">部门：</div>
                                <div th:text="${loginUser.department.name}"></div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">职位：</div>
                                <div th:text="${loginUser.role.getName()}"></div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">入职日期：</div>
                                <div th:text="${loginUser.createTime}"></div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">联系方式：</div>
                                <div>
                                    手机：<span th:text="${loginUser.employee.getPhone()}"></span><br>
                                    邮箱：<span th:text="${loginUser.email}"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 统计报表模块 -->
            <div class="module-card" id="statistics-report">
                <div class="card-header">
                    <h3><i class="fas fa-chart-bar me-2"></i> 统计报表</h3>
                    <div>
                        <select class="form-select form-select-sm">
                            <option>本月数据</option>
                            <option>本季度数据</option>
                            <option>本年度数据</option>
                        </select>
                    </div>
                </div>
                <div class="card-body">
                    <div class="chart-container">
                        <canvas id="statsChart"></canvas>
                    </div>
                </div>
            </div>

            <!-- 业务管理模块 -->
            <div class="module-card" id="business-management">
                <div class="card-header">
                    <h3><i class="fas fa-briefcase me-2"></i> 业务管理信息</h3>
                    <button class="btn btn-sm btn-light" onclick="window.location.href='/company/businessManagement'">业务管理</button>
                </div>
                <div class="card-body">
                    <table class="business-table">
                        <thead>
                            <tr>
                                <th>业务名称</th>
                                <th>类型</th>
                                <th>负责人</th>
                                <th>开始日期</th>
                                <th>结束日期</th>
                                <th>状态</th>
                                <th>优先级</th>
                            </tr>
                        </thead>
                        <tbody>
                        <tr th:each="business : ${loginUser.businessList}">
                            <td th:text="${business.name}">业务名称</td>
                            <td th:text="${business.type.name}">类型</td>
                            <td th:text="${business.owner.name}">负责人</td>
                            <td th:text="${business.startTime}">开始日期</td>
                            <td th:text="${business.endTime}">结束日期</td>
                            <td class="status-badge" th:text="${business.status}"></td>
                            <td class="badge" th:text="${business.priority}"></td>

                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- 部门管理模块 -->
<div class="module-card" id="department-management">
    <div class="card-header">
        <h3><i class="fas fa-users me-2"></i> 部门管理</h3>
        <button class="btn btn-sm btn-light" onclick="window.location.href='/company/departmentManagement'">部门管理</button>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>部门ID</th>
                        <th>部门名称</th>
                        <th>上级部门</th>
                        <th>部门负责人</th>
                        <th>创建时间</th>
                    </tr>
                </thead>
                <tbody>
                <tr th:each="department : ${loginUser.departmentList}">
                    <td th:text="${department.id}">部门ID</td>
                    <td th:text="${department.name}">部门名称</td>
                    <td th:text="${department.parent?.name}">上级部门</td>
                    <td th:text="${department.manager?.name}">部门负责人</td>
                    <td th:text="${department.createTime}">创建时间</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>



<!-- 帮助中心模块 -->
<div class="module-card" id="help-center">
    <div class="card-header">
        <h3><i class="fas fa-question-circle me-2"></i> 帮助中心</h3>
    </div>
    <div class="card-body">
        <div class="accordion" id="helpAccordion">
            <div class="accordion-item">
                <h2 class="accordion-header">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#help1" aria-expanded="true" aria-controls="help1">
                        如何修改个人信息？
                    </button>
                </h2>
                <div id="help1" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#helpAccordion">
                    <div class="accordion-body">
                        登录系统后，在左侧菜单中选择"个人中心"，然后点击页面右上角的"编辑信息"按钮，即可修改您的个人信息。修改完成后，请点击页面底部的"保存更改"按钮。
                    </div>
                </div>
            </div>
            <div class="accordion-item">
                <h2 class="accordion-header">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#help2" aria-expanded="false" aria-controls="help2">
                        如何添加新业务？
                    </button>
                </h2>
                <div id="help2" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#helpAccordion">
                    <div class="accordion-body">
                        在左侧菜单中选择"业务管理"，然后点击页面右上角的"新建业务"按钮。在弹出的表单中填写业务相关信息，包括业务名称、类型、负责人、开始日期、结束日期和优先级等。填写完成后，点击"提交"按钮即可创建新业务。
                    </div>
                </div>
            </div>
            <div class="accordion-item">
                <h2 class="accordion-header">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#help3" aria-expanded="false" aria-controls="help3">
                        如何重置密码？
                    </button>
                </h2>
                <div id="help3" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#helpAccordion">
                    <div class="accordion-body">
                        在登录页面，点击"忘记密码"链接。输入您的用户名或邮箱地址，系统将向您发送一封包含重置密码链接的邮件。点击邮件中的链接，按照提示设置新密码即可完成密码重置。
                    </div>
                </div>
            </div>
            <div class="accordion-item">
                <h2 class="accordion-header">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#help4" aria-expanded="false" aria-controls="help4">
                        如何导出数据报表？
                    </button>
                </h2>
                <div id="help4" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#helpAccordion">
                    <div class="accordion-body">
                        在左侧菜单中选择"统计报表"，在页面右上角选择您需要查看的时间范围（本月数据、本季度数据或本年度数据）。然后点击页面底部的"导出报表"按钮，选择导出格式（Excel、PDF或CSV），系统将为您生成并下载相应的数据报表。
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

        </div>
    </div>

    <script>
        // 初始化图表
        document.addEventListener('DOMContentLoaded', function() {
            const ctx = document.getElementById('statsChart').getContext('2d');
            // 图表数据
            const data = {
                labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
                datasets: [
                    {
                        label: '员工数量',
                        data: [1120, 1150, 1180, 1200, 1220, 1240, 1248],
                        borderColor: '#3a7bd5',
                        backgroundColor: 'rgba(58, 123, 213, 0.1)',
                        tension: 0.4,
                        fill: true
                    },
                    {
                        label: '业务数量',
                        data: [62, 68, 71, 75, 78, 82, 86],
                        borderColor: '#00b09b',
                        backgroundColor: 'rgba(0, 176, 155, 0.1)',
                        tension: 0.4,
                        fill: true
                    }
                ]
            };

            // 图表配置
            const config = {
                type: 'line',
                data: data,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top',
                        },
                        title: {
                            display: true,
                            text: '员工与业务增长趋势'
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: false,
                            grid: {
                                color: 'rgba(0, 0, 0, 0.05)'
                            }
                        },
                        x: {
                            grid: {
                                display: false
                            }
                        }
                    }
                }
            };

            // 创建图表
            new Chart(ctx, config);

            // 导航菜单点击事件
        document.querySelectorAll('.sidebar-menu a').forEach(link => {
            link.addEventListener('click', function(e) {
                // 移除所有active类
                document.querySelectorAll('.sidebar-menu a').forEach(item => {
                    item.classList.remove('active');
                });

                // 为当前点击项添加active类
                this.classList.add('active');

                // 移动端点击后关闭侧边栏
                if (window.innerWidth <= 768) {
                    document.getElementById('sidebar').classList.remove('active');
                }
            });
        });

        // 菜单切换按钮
        document.getElementById('menuToggle').addEventListener('click', function() {
            document.getElementById('sidebar').classList.toggle('active');
        });

        });
// 帮助中心手风琴效果
document.addEventListener('DOMContentLoaded', function() {
    const accordionButtons = document.querySelectorAll('.accordion-button');

    accordionButtons.forEach(button => {
        button.addEventListener('click', function() {
            const accordionCollapse = this.nextElementSibling;

            if (accordionCollapse.classList.contains('show')) {
                accordionCollapse.classList.remove('show');
                this.setAttribute('aria-expanded', 'false');
            } else {
                accordionCollapse.classList.add('show');
                this.setAttribute('aria-expanded', 'true');
            }
        });
    });
});



    </script>
</body>
</html>